<template>
  <!-- 未完成：
        1   45
        2   加载更多  通过常量 发起请求
        3   类型筛选  发起请求
     -->
  <div class="main">
    <div class="product">
      <div class="container">
        <!-- 左侧展示 -->
        <div class="col-md-3 product-price">
          <!-- 商城分类 -->
          <div class="rsidebar span_1_of_left">
            <div class="of-left">
              <h3 class="cate">商城分类</h3>
            </div>
            <ul class="menu">
              <li class="item1" >
                <a href="javascript:void(0);" @click="routeChange()">产品中心 </a>
              </li>
              <li class="item2">
                <!-- 路由跳转到积分商城 -->
                <a  style="color:rgb(255, 102, 0) !important" href="javascript:void(0);">积分商城 </a>
              </li>
            </ul>
          </div>

          <!--精品-->
          <div class="product-middle">
            <div class="fit-top">
              <h6 class="shop-top">Lorem Ipsum</h6>
              <a href="single.html" class="shop-now">SHOP NOW</a>
              <div class="clearfix"></div>
            </div>
          </div>

          <!-- 筛选 -->
          <div class="sellers">
            <div class="of-left-in">
              <h3 class="cate">积分区间</h3>
            </div>
            <div class="tags">
              <ul>
                <!-- 点击筛选的类型会触发更新右侧数据  样式高亮 -->
                <li style="font-size: 10px !important;" :id="i.id"   @click="searchData(i.id)" v-for="i in choseCondition"  :key="i.id"><a href="javascript:void(0);">{{i.value}}</a></li>
                <div class="clearfix"></div>
              </ul>
            </div>
          </div>

          <!---->
          <div class="product-bottom">
            <div class="of-left-in">
              <h3 class="best">热门兑换</h3>
            </div>
            <div class="product-go">
              <div class="fashion-grid">
                <a href="single.html"
                  ><img class="img-responsive" src="images/p1.jpg" alt=""
                /></a>
              </div>
              <div class="fashion-grid1">
                <h6 class="best2">
                  <a href="single.html"
                    >Lorem ipsum dolor sit amet consectetuer
                  </a>
                </h6>

                <span class="price-in1"> $40.00</span>
              </div>

              <div class="clearfix"></div>
            </div>
            <div class="product-go">
              <div class="fashion-grid">
                <a href="single.html"
                  ><img class="img-responsive" src="images/p2.jpg" alt=""
                /></a>
              </div>
              <div class="fashion-grid1">
                <h6 class="best2">
                  <a href="single.html"
                    >Lorem ipsum dolor sit amet consectetuer
                  </a>
                </h6>

                <span class="price-in1"> $40.00</span>
              </div>

              <div class="clearfix"></div>
            </div>
          </div>
        </div>

        <!-- 右侧展示 -->
        <div class="col-md-9 product1">
          <!-- 一排三个   三排 -->
          <div v-for="i in 3" :key="i" class="bottom-product">
            <div @click="buy(i)" v-for="i in 3" :key="i" class="col-md-4 bottom-cd simpleCart_shelfItem">
              <div class="product-at">
                <a href="javascript:void(0);"
                  ><img class="img-responsive" style="width:100%;height:200px" src="../../../../public/top.jpg" alt="" />
                  <div class="pro-grid">
                    <span class="buy-in">Buy Now</span>
                  </div>
                </a>
              </div>
              <p class="tun">It is a long established fact that a reader</p>
              <a href="javascript:void(0);" class="item_add"
                ><p class="number item_price"><i> </i>$500.00</p></a
              >
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="clearfix"></div>

        <!-- 底部分页 -->
        <nav class="in">
            <div class="block">
                    <el-pagination layout="prev, pager, next" 
                    :total="count"
                    :page-size='9'
                    @current-change='currentChange'>
                </el-pagination>
            </div>
        </nav>
      </div>
    </div>

    <!-- 抽屉 -->

    <el-drawer
      title="购买"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <div style="padding: 10px">
        <el-form
          size="mini"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <div
            style="
              margin-left: 20px;
              display: flex;
              flex-direction: row;
              margin-bottom: 10px;
            "
          >
            <img
              src="../../../../public/top.jpg"
              style="width: 100px; height: 100px"
            />
            <div
              style="
                width: 60%;
                padding-left: 10px;
                word-break: break-all;
                word-wrap: break-word;
              "
            >
              商品描述：12321312312312312321312321321321312321321312
            </div>
          </div>
          <el-form-item label="价格"> 5元 </el-form-item>
          <el-form-item label="购买数量"> 1 </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="ruleForm.roleName" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.roleName"
                :value="item.roleName"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >购买</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ligth{
    color: rgb(255, 102, 0)
    
}
</style>
<script>
import { ADMIN_CONSTANT, ROLELISTGTE } from "../../../utils/constant.js";
import * as adminApi from "../../../api/adminApi.js";
import * as roleApi from "../../../api/roleApi.js";
export default {
  name: "IndexIntegralStore",
  created() {
    this.getTableData();
    // this.option =roleApi.findTableData(ROLELISTGTE)
    // console.log(this.option);
    // option.then((res)=>{
    //     this.option = res
    // })
  },
  data() {
    //验证角色名称
    var validateLoginId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    return {
        // 新版数据
        // 筛选条件 
        choseCondition:[
            {id:'se_1', value:'0-100'},
            {id:'se_2', value:'100-200'},
            {id:'se_3', value:'200-300'},
            {id:'se_4', value:'300-400'},
            {id:'se_5', value:'400-500'},
            {id:'se_6', value:'>500'},
        ],
        //后台商品总数量
        count:9,












      option: [
        {
          id: "1",
          roleName: "支付宝",
        },
        {
          id: "2",
          roleName: "微信",
        },
      ],
      //筛选条件
      recommend: {
        productType: "",
        payType: "",
      },
      //是否打开抽屉
      drawer: false,
      // 表单数据
      ruleForm: {
        status: 2,
        loginId: "",
        loginPwd: "",
        name: "",
        phone: "",
        sex: "",
        roleName: "",
        loginPwd2: "",
      },
      // 表单验证数据
      rules: {
        loginId: [
          // 失去光标触发函数
          { validator: validateLoginId, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    noMore() {
      return this.end;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    //新版方法
    searchData(id){
        // 设置高亮
        this.choseCondition.forEach((v)=>{
            let doc = document.getElementById(v.id);
            if(v.id === id){
                doc.style = 'font-size: 10px !important;background-color:rgb(255, 102, 0)'
            }else{
                doc.style = 'font-size: 10px !important;'
            }
        })
        //查询数据



        
    },

    //页跳转
    currentChange(val){
      console.log(val);
        // this.pageIndex = val
        // this.getTableData()
    },

    // 路由跳转
    routeChange(){
      this.$router.push('/indexProduct')
    },

    //商品购买
    buy(data){
      console.log(111111111);
      if(this.$store.state.userInfo.money){
        console.log(111111111);
        this.drawer = true


        // 展示数据并购买
      }else{
        this.$con_firm('您未登录，请登录！')
      }
      
    },









    //筛选
    choseFun(type, choseType) {
      if (choseType === "productType") {
        this.recommend.productType = type;
      } else if (choseType === "payType") {
        this.recommend.payType = type;
      }
      console.log(this.recommend);
      this[choseType].forEach((v) => {
        if (v.label === type && v.type === "") {
          v.type = "primary";
        } else if (v.type === "primary" && v.label !== type) {
          v.type = "";
        }
      });
      //发起请求   渲染数据  this.recommend:筛选条件
    },
    load() {
      this.loading = true;
      //发起请求  携带表单数据
      this.$get("/product", {
        name: "11111",
      });
      console.log(1111);
    },
    //关闭抽屉
    handleClose(done) {
      done();
    },
    //搜索
    serach() {
      this.isSerach = true;
      this.getTableData();
      this.isSerach = false;
    },
    //获取表格数据
    //data 单页数据   count 后台数据总数量 用于分多少页
    getTableData() {
      let { data, count } = adminApi.findAdminList(
        ADMIN_CONSTANT.ADMINLISTGET,
        {
          serach: {
            isSerach: this.isSerach,
            roleName: this.input,
          },
          pageIndex: this.pageIndex,
          singlePageCount: 8,
        }
      );
      this.tableData = data;
      this.count = count;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>